<template>
    <div class="proItem">
      <div class="leftItem">
        <CheckBox class="checkbox"
         :isSelected="item.checked"
          @click.native="clickItem(item)"/>
        <img :src="item.img" alt="" @load="imgLoad"/>
      </div>
      <div class="rightItem">
        <p class="title">{{item.title}}</p>
        <p class="desc">{{item.desc}}</p>
        <span class="price">￥{{item.price}}</span>
        <span class="count">x{{item.count}}</span>
      </div>
    </div>
</template>

<script>
import CheckBox from 'components/content/checkBox'
export default {
  components:{
    CheckBox
  },
  props:{
    item:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  methods:{
    imgLoad(){
      this.$emit('loadImg')
    },
    clickItem(payload){
      this.$store.commit('checkedBox',payload)
    }
  }
};
</script>

<style scoped>
.proItem{
  border-bottom: 1px solid #ccc;
  display: flex;
  padding:10px 3px;
}
.proItem .leftItem{
  flex:0 1 25%;
  align-items: center;
  display: flex;
}
.proItem .checkbox{
  margin-right: 5px;
}
.proItem img{
  width: 60px;
  height: 80px;
  border-radius: 6px;
}
.proItem .rightItem{
  width:0;
  flex:1;
  position: relative;
  padding: 0 10px;
}
.proItem .rightItem p{
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
  
}
.proItem .rightItem p.title{
  font-size: 15px;
  font-weight: 500;
}
.proItem .rightItem p.desc{
  color:#666;
  font-size: 13px;
  line-height: 30px;
}
.proItem .rightItem span.price{
  color:red;
  font-size: 14px;
  position: absolute;
  bottom: 5px;
  left: 10px;
}
.proItem .rightItem span.count{
  font-size: 13px;
  position: absolute;
  bottom: 5px;
  right: 10px;
}
</style>